<template>
  <view class="sg">
    <view class="grid">
      <view class="item pressable" v-for="(s,i) in services" :key="i" @tap="onTap(s,$event)">
        <view class="ico-wrap">
          <image class="ico" :src="s.icon" />
          <view class="loader" v-if="s.loading" />
          <view class="done" v-if="s.done">✓</view>
        </view>
        <text class="txt">{{s.title || s.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default{ 
  name:'ServiceGrid', 
  props:{ services:Array },
  methods:{
    onTap(s,e){
      if(s.loading) return
      this.$emit('service-tap', s)
    }
  }
}
</script>

<style scoped>
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12rpx;margin:8rpx 24rpx}
.item{height:140rpx;border-radius:16rpx;background:rgba(255,255,255,.92);backdrop-filter:blur(16rpx);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1rpx solid rgba(0,0,0,.06)}
.ico-wrap{position:relative;width:64rpx;height:64rpx;border-radius:32rpx;display:flex;align-items:center;justify-content:center;background:#fff;border:2rpx solid #eee;margin-bottom:6rpx}
.ico{width:40rpx;height:40rpx}
.loader{position:absolute;left:0;bottom:0;height:6rpx;width:100%;background:linear-gradient(90deg, rgba(255,107,53,.15), rgba(255,107,53,.5));animation:loadbar .8s linear infinite;border-bottom-left-radius:32rpx;border-bottom-right-radius:32rpx}
@keyframes loadbar{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
.done{position:absolute;right:6rpx;bottom:4rpx;color:#52c41a;font-weight:700}
.txt{color:#2D3047}
</style>


